<template>
  <div>
    <div style="padding: 0 40px 50px; ">
      <div class="title">总体分析</div>
      <div class="sub-title">
        <span>平均分：</span>
        <span>{{ avgNum }}分</span>
      </div>
      <div class="sub-title">
        <span>最高分：</span>
        <span>
          <span></span>{{ detail.maxStudent.name }}-</span>
        <span>{{ detail.maxStudent.grade }}分</span>
      </div>
      <div class="sub-title">
        <span>最低分：</span>
        <span>
          <span>{{ detail.minStudent.name }}-</span>
          <span>{{ detail.minStudent.grade }}分</span>
        </span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="title">总分排名</div>
          <div id="main1" style="height: 300px;width: 100%"></div>
        </el-col>
        <el-col :span="12">
          <div class="title">总分区间比例</div>
          <div id="main2" style="height: 300px;width: 100%"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="title">每题平均分</div>
          <div id="main3" style="height: 300px;width: 100%"></div>
        </el-col>
        <el-col :span="12">
          <div class="title">错题比例</div>
          <div id="main4" style="height: 300px;width: 100%"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getEchartsById } from '@/api/Exam/index'
import * as echarts from 'echarts'

export default {
  name: 'index',
  data() {
    return {
      examId: 0,
      chartData: {},
      examName: '',
      avgNum: 0,
      detail: {
        maxStudent: {
          name: '',
          grade: 0
        },
        minStudent: {
          name: '',
          grade: 0
        }
      },
      chartData1: {},
      chartData2: {},
      chartData3: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },

  methods: {
    init() {
      setTimeout(() => {
        let examId = this.$route.params.id
        getEchartsById(examId).then(res => {
          this.detail = res.data
          this.avgNum = this.detail.avgGrade.toFixed(2)
          this.getServerData(res.data.gradeList)
          this.echarts1(this.detail.gradeListRange)
          this.echarts2(this.detail.questionVOS)
          this.echarts3(this.detail.errorVOS)
        })
      }, 1000)
    },
    getServerData(data) {
      let row = []
      let col = []
      for (let i in data) {
        row.push(data[i].name)
        col.push(data[i].grade)
      }
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: row
        },
        tooltip: {
          trigger: 'item'
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: col,
            type: 'bar'
          }
        ]
      }

      option && myChart.setOption(option)

    },
    echarts2(data) {
      let row = []
      let col = []
      for (let i in data) {
        row.push('题目编号' + data[i].questionId)
        let avg = data[i].avg
        col.push((avg * 1).toFixed(2))
      }
      var chartDom = document.getElementById('main3')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: row
        },
        tooltip: {
          trigger: 'item'
        },

        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: col,
            type: 'line'
          }
        ]
      }

      option && myChart.setOption(option)

    },
    echarts1(data) {
      var chartDom = document.getElementById('main2')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '分数段占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '分数段人数',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    echarts3(data) {
      let arr = []
      for (let i in data) {
        arr.push({
          name: data[i].questionName,
          value: data[i].value
        })
      }
      var chartDom = document.getElementById('main4')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '错题比例',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)' 
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data.map(item => item.questionName), // 使用题目名称作为图例数据
          formatter: function(name) {
            return ''; // 返回空字符串，不显示图例名称
          }
        },
        series: [
          {
            name: '错题比例',
            type: 'pie',
            radius: '50%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.title {
  margin: 20px 0;
  font-weight: bold;

}

.sub-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
</style>
